<template>
	<el-dialog title="服务维护" :visible.sync="dialogVisible" width="1600px" @close="handleClose"
		:close-on-click-modal="false" append-to-body>
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>版本比较</span>
		</div>
	
	
		<el-tabs>
			<el-tab-pane label="基础信息比较">
				<div>
					<el-row type="flex" justify="space-between" class="el-row-two">
						<el-col :span="12"  style="margin-right: 2px;">
							<div class="smp-result smp_panel_1">
								<div class="smp_panel_header">
									<div class="smp_panel_pre"></div>
									<div class="smp_panel_title">原始基础信息</div>
								</div>
								<div class="smp_panel_body">
									<el-descriptions size="mini" :column="1" border>
										<el-descriptions-item label="服务系统"> 
											{{smpServiceList.systemNo|getSystemName}}({{smpServiceList.systemNo}})
										</el-descriptions-item>
										<el-descriptions-item label="交易码" > {{smpServiceList.transCode}} </el-descriptions-item>
										<el-descriptions-item label="交易名称" > 
											 <span style="color: crimson;"  v-if="baseColor.transName=='1'">
												 {{smpServiceList.transName}} 
											 </span>
											 <span v-else>{{smpServiceList.transName}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="机构号" > 
											 <span style="color: crimson;"  v-if="baseColor.systemOrg=='1'">
												 {{smpServiceList.systemOrg}} 
											 </span>
											 <span v-else>{{smpServiceList.systemOrg}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="ESB测试地址" > 
											<span style="color: crimson;"  v-if="baseColor.esbAddr=='1'">
												{{smpServiceList.esbAddr}} 
											</span>
											<span v-else>{{smpServiceList.esbAddr}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="报文编码" > 
											<span style="color: crimson;"  v-if="baseColor.msgCode=='1'">
												{{smpServiceList.msgCode|dictName('SMP0004')}} 
											</span>
											<span v-else>{{smpServiceList.msgCode|dictName('SMP0004')}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="报文协议" > 
											<span style="color: crimson;"  v-if="baseColor.msgAgreement=='1'">
												{{smpServiceList.msgAgreement}} 
											</span>
											<span v-else>{{smpServiceList.msgAgreement}} </span>
										</el-descriptions-item>
										
										<el-descriptions-item label="报文协议" >
											<span style="color: crimson;"  v-if="baseColor.httpMethed=='1'">
												{{smpServiceList.httpMethed}} 
											</span>
											<span v-else>{{smpServiceList.httpMethed}} </span>
										</el-descriptions-item>
										
										<el-descriptions-item label="测试URL" > 
											<span style="color: crimson;"  v-if="baseColor.testAddr=='1'">
												{{smpServiceList.testAddr}} 
											</span>
											<span v-else>{{smpServiceList.testAddr}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="生产URL" > 
											<span style="color: crimson;"  v-if="baseColor.prodAddr=='1'">
												{{smpServiceList.prodAddr}} 
											</span>
											<span v-else>{{smpServiceList.prodAddr}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="服务编码" > 
											<span style="color: crimson;"  v-if="baseColor.busCode=='1'">
												{{smpServiceList.busCode}} 
											</span>
											<span v-else>{{smpServiceList.busCode}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="业务路由" > 
											<span style="color: crimson;"  v-if="baseColor.busPath=='1'">
												{{smpServiceList.busPath}} 
											</span>
											<span v-else>{{smpServiceList.busPath}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="外部可见" > 
											<span style="color: crimson;"  v-if="baseColor.outShow=='1'">
												{{smpServiceList.outShow|dictName('SMP0015')}} 
											</span>
											<span v-else>{{smpServiceList.outShow|dictName('SMP0015')}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="功能简介" > 
											<span style="color: crimson;"  v-if="baseColor.funIntr=='1'">
												{{smpServiceList.funIntr}} 
											</span>
											<span v-else>
												{{smpServiceList.funIntr}}
											</span>
										</el-descriptions-item>
										<el-descriptions-item label="外联业务路由" > 
											<span style="color: crimson;"  v-if="baseColor.oesbBusPath=='1'">
												{{smpServiceList.oesbBusPath}} 
											</span>
											<span v-else>{{smpServiceList.oesbBusPath}} </span>
										</el-descriptions-item>
									</el-descriptions>
									
									
								</div>
							</div>
						</el-col>
						<el-col :span="12"  style="margin-right: 3px;">
							<div class="smp-result smp_panel_1">
								<div class="smp_panel_header">
									<div class="smp_panel_pre"></div>
									<div class="smp_panel_title">维护基础信息</div>
								</div>
								<div class="smp_panel_body">
									<el-descriptions size="mini" :column="1" border>
										<el-descriptions-item label="服务系统"> 
											{{rowList.systemNo|getSystemName}}({{rowList.systemNo}})
										</el-descriptions-item>
										<el-descriptions-item label="交易码" > {{rowList.transCode}} </el-descriptions-item>
										<el-descriptions-item label="交易名称" > 
											 <span style="color: crimson;"  v-if="baseColor.transName=='1'">
												 {{rowList.transName}} 
											 </span>
											 <span v-else>{{rowList.transName}} </span>
										</el-descriptions-item>
										<el-descriptions-item label="机构号" > 
												 <span style="color: crimson;"  v-if="baseColor.systemOrg=='1'">
													 {{rowList.systemOrg}} 
												 </span>
												 <span v-else>{{rowList.systemOrg}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="ESB测试地址" >
												<span style="color: crimson;"  v-if="baseColor.esbAddr=='1'">
													{{rowList.esbAddr}} 
												</span>
												<span v-else>{{rowList.esbAddr}}</span>
											</el-descriptions-item>
											<el-descriptions-item label="报文编码" > 
												<span style="color: crimson;"  v-if="baseColor.msgCode=='1'">
													{{rowList.msgCode|dictName('SMP0004')}} 
												</span>
												<span v-else>{{rowList.msgCode|dictName('SMP0004')}} </span>
											</el-descriptions-item>
											<el-descriptions-item label="报文协议" > 
												<span style="color: crimson;"  v-if="baseColor.msgAgreement=='1'">
													{{rowList.msgAgreement}} 
												</span>
												<span v-else>{{rowList.msgAgreement}} </span>
											</el-descriptions-item>
											<el-descriptions-item label="报文协议" >
												<span style="color: crimson;"  v-if="baseColor.httpMethed=='1'">
													{{rowList.httpMethed}} 
												</span>
												<span v-else>{{rowList.httpMethed}} </span>
											</el-descriptions-item>
											<el-descriptions-item label="测试URL" > 
												<span style="color: crimson;"  v-if="baseColor.testAddr=='1'">
													{{rowList.testAddr}} 
												</span>
												<span v-else>{{rowList.testAddr}}</span>
											</el-descriptions-item>
											<el-descriptions-item label="生产URL" > 
												<span style="color: crimson;"  v-if="baseColor.prodAddr=='1'">
													{{rowList.prodAddr}} 
												</span>
												<span v-else>{{rowList.prodAddr}} </span>
											</el-descriptions-item>
											<el-descriptions-item label="服务编码" > 
												<span style="color: crimson;"  v-if="baseColor.busCode=='1'">
													{{rowList.busCode}} 
												</span>
												<span v-else>{{rowList.busCode}} </span>
											</el-descriptions-item>
											<el-descriptions-item label="业务路由" > 
												<span style="color: crimson;"  v-if="baseColor.busPath=='1'">
													{{rowList.busPath}} 
												</span>
												<span v-else>{{rowList.busPath}}</span>
											</el-descriptions-item>
											<el-descriptions-item label="外部可见" > 
												<span style="color: crimson;"  v-if="baseColor.outShow=='1'">
													{{rowList.outShow|dictName('SMP0015')}} 
												</span>
												<span v-else>{{rowList.outShow|dictName('SMP0015')}} </span>
											</el-descriptions-item>
											<el-descriptions-item label="功能简介" > 
												<span style="color: crimson;"  v-if="baseColor.funIntr=='1'">
													{{rowList.funIntr}} 
												</span>
												<span v-else>
													{{rowList.funIntr}}
												</span>
											</el-descriptions-item>
											<el-descriptions-item label="外联业务路由" > 
												<span style="color: crimson;"  v-if="baseColor.oesbBusPath=='1'">
													{{rowList.oesbBusPath}} 
												</span>
												<span v-else>{{rowList.oesbBusPath}} </span>
											</el-descriptions-item>
										</el-descriptions>
										
									</el-descriptions>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
					
					
			<el-tab-pane label="字段比较">
				
				<div style="height: 30px;">
					<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form">
						<el-form-item label="隐藏相同字段:">
						<!-- 	<el-checkbox v-model="checkflg" @change="flgChange">隐藏相同字段</el-checkbox>
							 -->
							<el-switch @change="flgChange" size="mini" active-text="是" inactive-text="否" v-model="checkflg" :width="60"></el-switch>
						</el-form-item>
					</el-form>
				</div>
				<div>
					<el-row type="flex" justify="space-between" class="el-row-two">
						<el-col :span="12"  style="margin-right: 2px;">
							<div>
								<div class=" smp_panel_1" style="margin-left: 3px;">
									<div class="smp_panel_header">
										<div class="smp_panel_pre"></div>
										<div class="smp_panel_title">原始字段</div>
									</div>
									<div class=" smp_panel_body" >
										
										
										<!-- <el-table class="fieldList" :data="smpFieldList.slice((smpFieldCurrentPage-1)*smpFieldPageSize,smpFieldCurrentPage*smpFieldPageSize)"  size="mini"  stripe  style="width: 100%" v-if="list1show"> -->
										<el-table  class="fieldList" :data="smpFieldList.slice((smpFieldCurrentPage-1)*smpFieldPageSize,smpFieldCurrentPage*smpFieldPageSize)"   :row-class-name="tableStatusClass"  size="mini" height="400px"    style="width: 100%" >
											<el-table-column prop="versionType" fixed label="比较结果" align="center" width="70">
												 <template slot-scope="scope">
													 <el-tag type="warning" size="mini" v-if="scope.row.versionType=='02'">{{scope.row.versionType|dictName("SMP0034")}}</el-tag>
													 
													 <el-tag type="danger" size="mini" v-else-if="scope.row.versionType=='04'" >
														{{scope.row.versionType|dictName("SMP0034")}}
													 </el-tag>
													
													 <el-tag type="info" size="mini" v-else >{{scope.row.versionType|dictName("SMP0034")}}</el-tag>
													 
												</template> 
											</el-table-column>
											<el-table-column prop="orderNumber" label="序号" align="center" width="45"></el-table-column>
											<el-table-column prop="fieldCode" show-overflow-tooltip label="字段代码" align="center" width="100"></el-table-column>
											<el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip align="center"></el-table-column>
											<el-table-column prop="parentType" label="父节点" align="center" width="60"></el-table-column>
											
											<el-table-column prop="nodeType" label="节点类型" align="center" width="85">
												 <template slot-scope="scope">
													{{scope.row.nodeType|dictName("SMP0017")}}
												</template> 
											</el-table-column>
											
											<el-table-column prop="fieldType" label="字段类型" align="center" width="70">
												 <template slot-scope="scope">
													{{scope.row.fieldType|dictName("SMP0018")}}
												</template> 
											</el-table-column>
											
											<el-table-column prop="fieldLength" label="长度" align="center" width="60"></el-table-column>
											<el-table-column prop="fieldRequire" align="center" label="是否必输" width="70">
												<template slot-scope="scope">
													{{scope.row.fieldRequire|dictName("SMP0015")}}
												</template>
												
											</el-table-column>
											
											<el-table-column prop="struct" label="报文结构" align="center" width="70">
												 <template slot-scope="scope">
													{{scope.row.struct|dictName("SMP0019")}}
												</template> 
											</el-table-column>
											
											<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述"></el-table-column> 
											
											<el-table-column prop="inOut" label="输入输出" align="center" width="70">
												 <template slot-scope="scope">
													{{scope.row.inOut|dictName("SMP0020")}}
												</template> 
											</el-table-column>
											
										
										</el-table>
										 <div class="smp-pagination" >
											<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="smpFieldPageSize" :page-sizes="[5,10,20]" :total="smpFieldList.length" :current-page="smpFieldCurrentPage" @current-change = "smpFieldCurrentChange" @size-change="smpFieldSizeChange">
											</el-pagination>
										</div> 
									</div>
								</div>
							</div>
						</el-col>
						
						<el-col :span="12"  style="margin-left: 3px;">
							<div>
								<div class=" smp_panel_1">
									<div class="smp_panel_header">
										<div class="smp_panel_pre"></div>
										<div class="smp_panel_title">维护字段</div>
									</div>
									<div class=" smp_panel_body">
										<!-- <el-table class="fieldList" :data="applyFieldList.slice((applyFieldCurrentPage-1)*applyFieldPageSize,applyFieldCurrentPage*applyFieldPageSize)"  size="mini"   stripe  style="width: 100%" v-if="list1show"> -->
										<el-table   class="fieldList" :data="applyFieldList.slice((applyFieldCurrentPage-1)*applyFieldPageSize,applyFieldCurrentPage*applyFieldPageSize)"  size="mini"    height="400px"    style="width: 100%"  :row-class-name="tableStatusClass">
											
											<el-table-column prop="versionType" fixed label="比较结果" align="center" width="70">
												<template slot-scope="scope">
													 <el-tag type="warning" size="mini" v-if="scope.row.versionType=='02'">{{scope.row.versionType|dictName("SMP0034")}}</el-tag>
													 
													 <el-tag type="success" size="mini" v-else-if="scope.row.versionType=='03'" >
														{{scope.row.versionType|dictName("SMP0034")}}
													 </el-tag>
														
													 <el-tag type="info" size="mini" v-else >{{scope.row.versionType|dictName("SMP0034")}}</el-tag>
													 
												</template> 
											</el-table-column>
										
											<el-table-column prop="orderNumber" label="序号" align="center" width="45"></el-table-column>
											<el-table-column prop="fieldCode" label="字段代码" show-overflow-tooltip align="center" width="100"></el-table-column>
											<el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip align="center" ></el-table-column>
											<el-table-column prop="parentType" label="父节点" align="center" width="60"></el-table-column>
											
											<el-table-column prop="nodeType" label="节点类型" align="center" width="85">
												 <template slot-scope="scope">
													{{scope.row.nodeType|dictName("SMP0017")}}
												</template> 
											</el-table-column>
											
											<el-table-column prop="fieldType" label="字段类型" align="center" width="70">
												 <template slot-scope="scope">
													{{scope.row.fieldType|dictName("SMP0018")}}
												</template> 
											</el-table-column>
											
											<el-table-column prop="fieldLength" label="长度" align="center" width="60"></el-table-column>
											<el-table-column prop="fieldRequire" align="center" label="是否必输" width="70">
												<template slot-scope="scope">
													{{scope.row.fieldRequire|dictName("SMP0015")}}
												</template>
												
											</el-table-column>
											
											<el-table-column prop="struct" label="报文结构" align="center" width="70">
												 <template slot-scope="scope">
													{{scope.row.struct|dictName("SMP0019")}}
												</template> 
											</el-table-column>
											
										 <el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述"></el-table-column> 
											
											<el-table-column prop="inOut" label="输入输出" align="center" width="70">
												 <template slot-scope="scope">
													{{scope.row.inOut|dictName("SMP0020")}}
												</template> 
											</el-table-column>
											
										
										</el-table>
										 <div class="smp-pagination" >
											<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="applyFieldPageSize" :page-sizes="[5,10,20]" :total="applyFieldList.length" :current-page="applyFieldCurrentPage" @current-change = "applyFieldCurrentChange" @size-change="applyFieldSizeChange">
											</el-pagination>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						
					</el-row>
				</div>
			
			</el-tab-pane>
			
		
		</el-tabs>
	</el-dialog>
</template>

<script>
	"use strict";
	import {getFieldByServer,getFieldBySmpAndApply} from '@/api/field.js';
	import {getBaseBySmpAndApply} from '@/api/demand.js';
	
	export default {
		data() {
			return {
				that:this,
				index:0,
				type:'add',
				dialogVisible: false,
				list1show: true,
				requireTypeDisable:false,
				transCodeDisabled:false,
				checkflg:true,
				
				rowList:[],
				smpServiceList:[],
				baseColor:[],
				
				applyFieldList0:[],
				applyFieldList:[],
				smpFieldList0:[],
				smpFieldList:[],
				//请求字段分页信息
				applyFieldCurrentPage:1,
				applyFieldPageSize:10,
				smpFieldCurrentPage:1,
				smpFieldPageSize:10,
				showList:true,
				
				form: {
					 applyId: '',
					 requireType:'01',
					 transName: '',
					 transCode: '',
					 systemNo: '',
					 systemOrg:'',
					 msgAgreement: '',
					 msgCode: '',
					 testAddr: '',
					 prodAddr: '',
					 esbAddr:'',
					 outShow:'01',
					 funIntr:'',
					 remark:'',
					 applyFieldList:[], 
				},
				
			};
		},
		components: {
			
		},
		created() {
		},
		
		filters: {
		},
				
		methods: {
			
			smpFieldCurrentChange(val) {
			
				this.smpFieldCurrentPage = val
			},
			smpFieldSizeChange(val) {
				this.smpFieldCurrentPage = 1
				this.smpFieldPageSize = val
			},
			
			
			applyFieldCurrentChange(val) {
			
				this.applyFieldCurrentPage = val
			},
			applyFieldSizeChange(val) {
				this.applyFieldCurrentPage = 1
				this.applyFieldPageSize = val
			},
			
			
			
			flgChange(checkflg){
				
				if(checkflg){
					this.applyFieldList = this.applyFieldList0.filter((item)=>item.versionType!='01');
					this.smpFieldList = this.smpFieldList0.filter((item)=>item.versionType!='01');
				}else{
					this.applyFieldList = this.applyFieldList0;
					this.smpFieldList = this.smpFieldList0;
						
				}
			},
			/* SMP0034	对比结果	02	修改	01
			SMP0034	对比结果	03	新增	01
			SMP0034	对比结果	04	删除	01 */
			tableStatusClass({row,index}){
				if(row.versionType === '02'){
					return 'table-warning';
				}else if(row.versionType === '03'){
					return 'table-info';
				}else if(row.versionType === '04'){
					return 'table-error';
				}else if( index%2 == 0){
					return 'table-strip';
				}else{
					return ''
				}
				
				
			},
			
			showDialog2(row,index) {
				this.type='update';
				this.index = index;
				this.form = row;
				
				this.addServerView(row);
				this.getByApplyId(row);
				
				this.dialogVisible = true;
				this.requireTypeDisable = true;
				this.transCodeDisabled = true;
			},
			
			closeDialog() {
				this.$refs["form"].resetFields();
				this.dialogVisible = false;
			},

			handleClose() {
				this.dialogVisible = false;
			},
			
			addServerView(row){
				Object.assign(this.form,row);
				
				getFieldBySmpAndApply({"transCode":this.form.transCode,"systemNo":this.form.systemNo,"applyId":this.form.applyId}).then(response => {
					this.applyFieldList0 = response.data.extend.applyFieldList;
					
					this.smpFieldList0 = response.data.extend.smpFieldList;
					
					if(this.checkflg){
						this.applyFieldList = this.applyFieldList0.filter((item)=>item.versionType!='01');
						this.smpFieldList = this.smpFieldList0.filter((item)=>item.versionType!='01');
					}else{
						this.applyFieldList = this.applyFieldList0;
						this.smpFieldList = this.smpFieldList0;
					}
					
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
				
				
			},
			
			getByApplyId(row){
				getBaseBySmpAndApply({"applyId":row.applyId,"transCode":row.transCode}).then(response => {
					this.rowList = response.data.extend.applyServer;
					this.smpServiceList = response.data.extend.smpService;
					this.baseColor = response.data.extend.baseColor;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			
			
		},

	}
</script>

<style>
	
	.el-table .table-warning{
		background-color:#feffdd;
	}
	.el-table .table-info{
		background-color: #caffd0;
	}
	
	.el-table .table-error{
		background-color: #ffdce6;
	}
	
	.el-table .table-strip{
		background-color: #d4d4d4;
	}
	
	
	.detailsTitle {
		color: black;
		font-size: 18px;
		text-align: left;
		margin-top: 10px;
		margin-left: 15px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}
	
	.fieldList{
		min-height: 100px;
		max-height: 400px;
		overflow: auto;
	}
	
	
</style>
